<!-- 上传照片 -->
<template>
	<view class="container" v-show="props.detail.remark || props.detail.photo_list && props.detail.photo_list.length">
		<view class="content">
			<text class="title">照片/备注</text>
			<view class="list">
				<view class="upload-item" v-if="props.detail.photo_list && props.detail.photo_list.length">
					<view class="pic-box" v-for="(path, index) in props.detail.photo_list" :key="index" @click="handlePreview(path)">
						<image class="pic" :src="path" mode="aspectFill"></image>
					</view>
				</view>
				<view class="remark-item" v-if="props.detail.remark">
					<text class="text-area">{{props.detail.remark}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		detail: { // 详情
			type: Object,
			default: () => ({})
		},
	});
	
	// 预览图片
	const handlePreview = (url) => {
		uni.previewImage({
			urls: [url],
		});
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 40rpx 25rpx 0;

		.content {
			.title {
				font-weight: bold;
				font-size: 30rpx;
				color: #222222;
				line-height: 1.5;
			}
		}
	}

	.list {
		background-color: white;
		border-radius: 20rpx;
		margin-top: 30rpx;
		padding-left: 30rpx;

		.upload-item {
			display: flex;
			flex-wrap: wrap;
			padding-bottom: 38rpx;
			margin-left: -30rpx;
			overflow: hidden;

			.pic-box {
				position: relative;
				width: 136rpx;
				height: 136rpx;
				margin-top: 25rpx;
				margin-left: 30rpx;

				.pic {
					width: inherit;
					height: inherit;
					border-radius: 10rpx;
				}

				.close-btn {
					position: absolute;
					top: -20rpx;
					right: -20rpx;
					font-size: 40rpx;
					color: #D9D9D9;
					border-radius: 50%;
					background: radial-gradient(#999999 50%, transparent 50%);
				}
			}


			.upload-btn {
				width: 136rpx;
				height: 136rpx;
				font-size: 60rpx;
				color: #60646F;
				text-align: center;
				line-height: 136rpx;
				border-radius: 10rpx;
				background-color: #F5F4F5;
				margin-top: 25rpx;
				margin-left: 30rpx;
			}
		}
		
		.upload-item + .remark-item {
			border-top: 1rpx solid #E5E5E5;
		}

		.remark-item {
			padding: 25rpx 20rpx 25rpx 0;

			.text-area {
				width: 100%;
				font-size: 30rpx;
				color: #222222;
				line-height: 1.5;
			}
		}
	}
</style>